<!--
 * @Author: wanlixin
 * @Date: 2019-10-04 15:09:27
 * @LastEditors: sylvanas
 * @LastEditTime: 2019-11-11 16:30:02
 * @Description: navbar component
 -->

<template>
  <div class="navbar" :style="{background: options.bgColor, color: options.textColor}">
    <!-- 返回按钮 -->
    <transition :name="options.transitionName">
      <button class="navbar-back" @click="handleBack">
        <slot name="navBarLeftBtn">
          <i class="iconfont left" :style="{color:options.textColor}"></i>
        </slot>
      </button>
    </transition>

    <!-- 标题和副标题 -->
    <transition :name="options.transitionName">
      <h1 class="navbar-title" v-if="options.title">
        <p class="navbar-title-main">{{options.title}}</p>
        <p class="navbar-title-second" v-if="options.subtitle">{{options.subtitle}}</p>
      </h1>
    </transition>

    <!-- 右侧的操作按钮 -->
    <div
      class="navbar-operate-btns"
      v-if="options.operateBtns && options.operateBtns.length && options.operateBtns.length <= 2"
    >
      <button
        class="navbar-operate-btn"
        v-for="(item, index) in options.operateBtns"
        :key="index"
        :style="{color: item.color}"
        @click="item.onClick"
      >
        <template v-if="item.type === 'text'">
          <span>{{item.text}}</span>
        </template>
        <template v-else-if="item.type === 'icon'">
          <i class="operate-icon iconfont" :class="item.text"></i>
        </template>
      </button>
    </div>
  </div>
</template>
<script>
export default {
  name: 'grimm-navbar',
  props: {
    options: {
      type: Object,
      default: () => {
        return {
          bgColor: '#fff', // nav bg color
          textColor: '#303133', // nav theme color
          title: '标题', // nav title
          transitionName: 'v',
          operateBtns: [
            // nav right btns config options
            {
              color: '#fff', // button color
              type: 'text', // button type
              text: '分享', // button inner content
              onClick() {}, // item button click event handle
            },
          ],
        };
      },
    },
  },
  methods: {
    // 争议点：H5 route， 还是App Webview 的route
    handleBack() {
      this.$emit('onBack');
    },
  },
};
</script>
<style lang="stylus" >
.navbar {
  position: relative;
  width: 100%;
  height: 44px;
}

.navbar-back, .navbar-title, .navbar-operate-btns {
  position: absolute;
  top: 50%;
  transform: translate3d(0, -50%, 0);
}

.navbar-back {
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  min-width: 44px;
  height: 100%;
  font-size: 18px;
}

.grimmic-back {
  position: absolute;
  top: 0;
  left: 0;
}

.navbar-title {
  left: 24%;
  width: 52%;
  text-align: center;

  p {
    width: 100%;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
  }

  .navbar-title-second {
    font-size: 12px;
  }
}

.navbar-operate-btns {
  right: 16px;
}

.navbar-operate-btn {
  font-size: 14px;

  &:nth-last-child(1) {
    margin-left: 10px;
  }
}

.operate-icon {
  font-size: 20px;
}
</style>